<template>
    <div ref="main" style="width: 100%;height: 100%;"></div>
</template>

<script setup>
    import {
        ref,
        onMounted
    } from 'vue';
    import * as echarts from 'echarts';

    const main = ref(null); // 使用ref来创建一个响应式引用
    let myChart = null; // 初始化ECharts实例的变量

    onMounted(() => {
        if (main.value) { // 确保DOM元素已经渲染
            myChart = echarts.init(main.value); // 初始化ECharts实例
            const option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '0%',
                    left: 'center'
                },
                series: [{
                    name: '学业预警系统',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    padAngle: 5,
                    itemStyle: {
                        borderRadius: 10
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [{
                            value: 1048,
                            name: '成绩预警'
                        },
                        {
                            value: 735,
                            name: '考勤预警'
                        },
                        {
                            value: 580,
                            name: '学分预警'
                        },
                        {
                            value: 484,
                            name: '作业完成率预警'
                        },
                    ]
                }]
            };
            myChart.setOption(option); // 设置ECharts选项
        }
    });
</script>

<style>
    /* 可以在这里添加样式 */
</style>


<!-- <template>
    <div ref="main" style="width: 100%;height: 100%;"></div>
</template>

<script setup>
    import {
        ref,
        onMounted,
        watchEffect // 引入watchEffect来响应数据变化
    } from 'vue';
    import * as echarts from 'echarts';
    import axios from 'axios'; // 假设使用axios进行HTTP请求

    const main = ref(null); // 使用ref来创建一个响应式引用
    let myChart = null; // 初始化ECharts实例的变量
    const chartData = ref([]); // 用于存储从后端获取的数据

    // 获取后端数据的函数
    const fetchData = async () => {
        try {
            const response = await axios.get('/api/chart-data'); // 假设后端数据接口为/api/chart-data
            chartData.value = response.data;
        } catch (error) {
            console.error('Error fetching chart data:', error);
        }
    };

    onMounted(() => {
        if (main.value) { // 确保DOM元素已经渲染
            myChart = echarts.init(main.value); // 初始化ECharts实例
            fetchData(); // 组件挂载后立即获取数据
        }
    });

    // 监听chartData的变化，更新图表
    watchEffect(() => {
        if (myChart && chartData.value.length > 0) {
            updateChart();
        }
    });

    // 更新图表的函数
    const updateChart = () => {
        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0%',
                left: 'center'
            },
            series: [{
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: chartData.value // 使用从后端获取的数据
            }]
        };
        myChart.setOption(option); // 设置ECharts选项
    };
</script>

<style>
    /* 可以在这里添加样式 */
</style> -->

<!-- [
    {
        "value": 1048,
        "name": "Search Engine"
    },
    {
        "value": 735,
        "name": "Direct"
    },
    {
        "value": 580,
        "name": "Email"
    },
    {
        "value": 484,
        "name": "Union Ads"
    },
    {
        "value": 300,
        "name": "Video Ads"
    }
] -->